<template>
  <div style="position: relative; overflow: hidden; overflow-y: hidden">
    <div ref="wrap" class="wrap">
      <div ref="ScaleBox" class="ScaleBox">
        <div class="header">
          <div class="Home_title">
            {{ $t('productMonitoringDashboard') }}
          </div>
          <selectLanguage class="selectLanguage" />
        </div>
        <div class="bigScreen">
          <div>
            <div style="width: 488px; position: relative;">
              <div class="switchBox" style="width: 160px;height: 60px;color: #FFFFFF;">
                <div
                  style="display: flex; align-items: center; cursor: pointer;"
                  @click="$router.push('/secondaryScreen1')"
                >
                  <div class="switchIcon" />
                  <div style="margin-left: 10px; font-size: 18px;">
                    {{ $t('secondaryScreen1') }}
                  </div>
                </div>
              </div>
              <div class="productionquantity">
                {{ $t('productionQuantity') }}
              </div>
              <div>
                <productionquantityVue ref="productionquantityVue" />
              </div>
            </div>
            <div style="width: 488px; margin-top: 50px">
              <div class="productionquantity">
                {{ $t('productQuantity') }}
              </div>
              <div>
                <productquantityVue ref="productquantityVue" />
              </div>
            </div>
          </div>
          <div>
            <div style="display: flex">
              <div style="margin-left: 120px">
                <div style="width: 488px">
                  <div class="productionquantity">
                    {{ $t('defectiveProduct') }}
                  </div>
                  <div style="text-align: center">
                    <el-date-picker
                      v-model="value1"
                      value-format="yyyy-MM-dd"
                      type="daterange"
                      range-separator="~"
                      :start-placeholder="$t('startTime')"
                      :end-placeholder="$t('endTime')"
                    />
                  </div>
                  <div class="unqualifiedCode">
                    <div class="unqualifiedCodeTitle">
                      {{ $t('The_QR_code_ID_of_the_non-conforming_pro') }}
                    </div>
                    <div style="height: 280px;overflow: auto; color: #ffffff; font-size: 20px">
                      <div
                        v-for="(item, index) in unqualifiedCodeList"
                        :key="'unqualifiedCode' + index"
                        class="unqualifiedCodeRow"
                      >
                        <div style="margin-right: 40px">
                          <QRCode :width="40" :height="40" :content="item.partCode" />
                        </div>
                        <div style="width: 120px">
                          产品ID
                        </div>
                        <div style="width: 120px">
                          <el-tooltip class="tooltip" :content="item.content" placement="top">
                            <div style="width: 120px">
                              {{ item.partCode }}
                            </div>
                          </el-tooltip>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="faultStatistics">
                <div class="faultStatisticsTitle">
                  {{ $t('statisticsOnDowntimeAndCauseOfFailure') }}
                </div>
                <table class="faultStatisticsTable">
                  <thead class="faultStatisticsTable_thead">
                    <tr align="center" style="font-size: 18px;">
                      <td style="width: 40px">
                        {{ $t('NO') }}
                      </td>
                      <td style="width: 120px">
                        {{ $t('Fault_reporting_time') }}
                      </td>
                      <td style="width: 120px">
                        {{ $t('Shutdown_duration') }}
                      </td>
                      <td style="width: 210px">
                        {{ $t('Cause_of_malfunction') }}
                      </td>
                    </tr>
                  </thead>
                </table>

                <myClass
                  class="faultStatisticsTable"
                  :data="faultList"
                  :class-option="classOption"
                  style="height: 430px; overflow: hidden"
                >
                  <table style="width: 100%">
                    <tbody ref="scrollTable" style="position: relative;font-size: 18px;">
                      <tr v-for="(item, index) in faultList" :key="'we' + index" align="center" class="tableRow">
                        <td style="width: 40px">
                          {{ item.indexNo }}
                        </td>
                        <td style="width: 120px">
                          {{ item.startTime }}
                        </td>
                        <td style="width: 120px">
                          {{ item.totalTime }}
                        </td>
                        <td style="width: 210px">
                          <el-tooltip class="tooltip" :content="item.content" placement="top">
                            <div class="tooltip_content">
                              {{ item.content }}
                            </div>
                          </el-tooltip>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </myClass>
                <!-- </div> -->
              </div>
            </div>
            <div class="defectiveProductStatistics">
              <div class="defectiveProductStatistics_title">
                {{ $t('Statistics_of_defective_products_in_the_testing_table') }}
              </div>
              <div>
                <table :border="true" class="defectiveProductStatistics_table">
                  <thead style="height: 40px; line-height: 40px">
                    <tr align="center">
                      <td v-for="(item, index) in defectiveProductStatisticsColumn" :key="'column' + index">
                        {{ item }}
                      </td>
                    </tr>
                  </thead>
                  <tbody>
                    <tr
                      v-for="(item, index) in defectiveProductStatisticsList"
                      :key="'tableList' + index"
                      align="center"
                      class="tableRow"
                    >
                      <td v-for="(columnItem, index) in defectiveProductStatisticsColumn" :key="'column' + index">
                        {{ item[columnItem] }}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import productionquantityVue from './component/productionQuantity'
import productquantityVue from './component/productQuantity.vue'
import myClass from './component/myClass.vue'
import QRCode from '@/components/QRCode'
import selectLanguage from '@/components/selectLanguage'
import { homeData, equipmentfailureHistory } from '@/api/common'

import filters from '@/filters/index'
var roll, scrolltimer
export default {
  components: {
    QRCode,
    productionquantityVue,
    productquantityVue,
    myClass,
    selectLanguage
  },
  data() {
    return {
      scale: null,
      width: 1920,
      height: 1080,
      widthValue: 1920,
      heightValue: 1080,

      scrolltimer: null,
      timer: null,
      value1: '',
      faultList: [],
      unqualifiedCodeList: [],
      defectiveProductStatisticsColumn: [],
      defectiveProductStatisticsList: [],
      queryParams: {
        startTime: '',
        endTime: '',
        language: window.sessionStorage.getItem('lang') && window.sessionStorage.getItem('lang') == 'zh' ? 'cn' : window.sessionStorage.getItem('lang') || 'cn'
      },
      manual: false

    }
  },
  computed: {
    classOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 10, // 开始无缝滚动的数据量
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  watch: {
    value1(newVal, oldVal) {
      if (newVal) {
        this.queryParams.startTime = newVal[0]
        this.queryParams.endTime = newVal[1]
        this.getInit()
      } else {
        this.queryParams = {
          startTime: '',
          endTime: '',
          language: window.sessionStorage.getItem('lang') && window.sessionStorage.getItem('lang') == 'zh' ? 'cn' : window.sessionStorage.getItem('lang') || 'cn'
        }
        this.getInit()
      }
    },
    deep: true
  },
  mounted() {
    this.setScale()
    window.addEventListener('resize', this.setScale)
    clearInterval(this.timer)
    this.getInit()
    this.timer = setInterval(() => {
      this.getInit()
    }, 60000)
  },
  // 生命周期 - 创建完成
  created() { },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  // 方法集合
  methods: {
    getInit() {
      homeData(this.queryParams).then((res) => {
        const { code, data } = res
        if (code == 1) {
          this.defectiveProductStatisticsList = []
          data.op.forEach((item, index) => {
            this.defectiveProductStatisticsList.push({ ...item.dicy, 序号: Number(index + 1) })
          })
          this.defectiveProductStatisticsColumn = ['序号', ...data.tiemtype]
          this.unqualifiedCodeList = data.buliang
          const productquantityTotal = data.chengpin && data.chengpin.length && data.chengpin.map(item => item.count).reduce(function(prev, curr, idx, arr) {
              return Number(prev) + Number(curr);
            }) || 0,
            productionquantityTotal = data.shengchan && data.shengchan.length && data.shengchan.map(item => item.count).reduce(function(prev, curr, idx, arr) {
              return Number(prev) + Number(curr);
            }) || 0

          this.$refs.productquantityVue.init(data.chengpin, productquantityTotal)
          this.$refs.productionquantityVue.init(data.shengchan, productionquantityTotal)
        }
      })
      equipmentfailureHistory().then((res) => {
        const { code, data } = res
        if (data) {
          data.forEach((item, index) => {
            item.indexNo = (index + 1)
            item.startTime = filters.formatDate(item.startTime)
            item.totalTime = (Number(item.totalTime) / 60).toFixed(2) < 60 ? (Number(item.totalTime) / 60).toFixed(2) + '分' : ((Number(item.totalTime) / 60).toFixed(2) / 60).toFixed(2) + '小时'
          })
          this.faultList = data
        }
      })
    },
    getScale() {
      const { width, height } = this,
        ww = window.innerWidth / width,
        wh = window.innerHeight / height
      return ww < wh ? wh : ww
      // return ww
      // return ww < wh ? ww : wh;
    },
    getHeightScale() {
      const { width, height } = this,
        wh = window.innerHeight / height
      return wh
    },
    getWidthScale() {
      const { width, height } = this,
        ww = window.innerWidth / width
      return ww
    },
    setScale() {
      this.scale = this.getScale()
      const scale1 = this.getWidthScale(),
        scale2 = this.getHeightScale()
      if (this.$refs.ScaleBox) {
        this.$refs.ScaleBox.style.setProperty('--scale', scale1)
        this.$refs.ScaleBox.style.setProperty('--scale2', scale2)
      }
      if (this.$refs.wrap) {
        this.$refs.wrap.style.setProperty(
          '--heightValue',
          this.scale * this.heightValue + 'px'
        )
        this.$refs.wrap.style.setProperty(
          '--widthValue',
          this.scale * this.widthValue + 'px'
        )
      }
    }
  }
}
</script>

<style scoped>
.header {
  position: relative;
  width: 1920px;
  height: 100px;
  background-image: url('../../assets/imgs/u80.png');
  background-size: 100% 100%;
  text-align: center;
  font-size: 40px;
  color: #fff;
  line-height: 100px;
  font-weight: 600;
  letter-spacing: 0.15em;
}

body::-webkit-scrollbar {
  width: 0 !important;
  display: none;
}

::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
  overflow-y: hidden;
}

.wrap {
  width: var(--widthValue);
  height: var(--heightValue);
  background-color: #050d3a;
  background-size: 100% 100%;
  overflow: hidden;
  scrollbar-width: none;
}

#ScaleBox {
  --scale: 1;
}

.ScaleBox {
  width: 100%;
  height: 100%;
  transform: scale(var(--scale), var(--scale2));
  transform-origin: 0 0;
  background-repeat: no-repeat;
  background-size: 100%;
}

.flex {
  display: flex;
  justify-content: space-between;
  /* background-color: pink; */
}

.bigScreen {
  width: 1920px;
  height: 1000px;
  box-sizing: border-box;
  padding: 20px 80px 20px 80px;
  display: flex;
}

.productionquantity {
  height: 88px;
  line-height: 88px;
  margin: 20px 0;
  font-weight: 700;
  font-style: normal;
  font-size: 28px;
  color: #0ee4f9;
  text-align: center;
  background-image: url('../../assets/imgs/background.png');
  background-position: -130px -69px;
  background-repeat: no-repeat;
}

.el-date-editor--daterange {
  background-color: #050d3a !important;
}

::v-deep .el-range-input {
  background-color: #050d3a !important;
}

.unqualifiedCode {
  width: 460px;
  height: 419px;
  background-image: url('../../assets/imgs/background.png');
  background-position: -430px -600px;
}

.unqualifiedCodeTitle {
  font-weight: 400;
  font-style: normal;
  font-size: 22px;
  color: rgb(14, 228, 249);
  text-align: center;
  padding-top: 60px;
  padding-bottom: 20px;
}

.el-date-editor--daterange.el-input__inner {
  width: 420px !important;
}

.unqualifiedCodeRow {
  display: flex;
  align-items: center;
  padding: 5px 10px 5px 70px;
}

.faultStatistics {
  width: 550px;
  height: 600px;
  background-image: url('../../assets/imgs/background.png');
  background-position: -1300px -60px;
  margin-left: 120px;
}

.faultStatisticsTitle {
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  color: rgb(14, 228, 249);
  margin-top: 20px;
  margin-left: 20px;
}

.faultStatisticsTable {
  color: #ffffff;
  width: calc(100% - 60px);
  /* padding: 20px 20px 0 20px; */
  margin: 0 auto;
  margin-top: 20px;
}

::v-deep .el-table__empty-block {
  background-color: #041536 !important;
}

::v-deep .el-table th,
::v-deep .el-table tr {
  background-color: #041536 !important;
  color: #ffffff;
}

.tableRow {
  height: 40px;
  line-height: 40px;
}

.defectiveProductStatistics {
  height: 350px;
  background-image: url('../../assets/imgs/background.png');
  background-position: -100px -198px;
  margin-left: 120px;
}

.defectiveProductStatistics_title {
  font-weight: 700;
  font-style: normal;
  font-size: 36px;
  color: #0edef2;
  text-align: center;
}

.defectiveProductStatistics_table {
  width: calc(100% - 120px);
  padding: 20px 60px;
  margin: 0 auto;
  margin-top: 20px;
  color: #ffffff;
}

.defectiveProductStatistics_table {
  border-collapse: collapse;
  font-size: 13px;
  height: 24px;
  line-height: 24px;
  text-align: center;
}

.defectiveProductStatistics_table tr th {
  color: #fff;
  font-size: 13px;
  height: 24px;
  line-height: 24px;
}

.defectiveProductStatistics_table tr th.th_border {
  border-right: solid 1px #fff;
  border-left: solid 1px #0bc0c4;
}

.defectiveProductStatistics_table tr td {
  border: solid 1px #0bc0c4;
  background-color: #1e408a;
}

::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
  background-color: #041536 !important;
}

.faultStatisticsTable_thead {
  height: 40px;
  line-height: 40px;
  background-color: #081b56;
}

.switchIcon {
  width: 50px;
  height: 50px;
  background-image: url('../../assets/imgs/background.png');
  background-position: -130px 425px;
}

.tooltip_content {
  width: 210px;
  overflow: hidden;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

.switchBox {
  position: absolute;
  top: -60px;
}
</style>
